<!DOCTYPE html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>

    <h3>当前登录人：<span th:text="${session.user.name}"></span></h3><hr/>
    账号:<span th:text="${session.user.account}"></span><br/>
    年龄:<span th:text="${session.user.age}"></span><br/>
    已创建工作流实例数量:<span th:text="${userTaskList?.createNum ?: 0 }">0</span><br/>
    待审批数量:<span th:text="${userTaskList?.unfinishNum ?: 0 }">0</span><br/>
    流程审批完成数量:<span th:text="${userTaskList?.finishNum ?: 0 }">0</span><br/>


    <br/><button id="deployment">部署流程</button><br/>

    <!--流程处理-->
    <div id="back">
        <img src="../static/sptest.png" th:src="@{/sptest.png}"/>

        <button id="startProcess">启动流程</button>
    </div>


    <!--流程信息显示--><!--style="display:none"-->
    <div id="processInfo" >
        <div >
            <p></p>
            <p></p>


            <table border="1" cellspacing="0">
                <tr>
                    <td>发起人</td>
                    <td>流程名称</td>
                    <td>开始时间</td>
                    <td>流程状态</td>
                    <td>下一处理人</td>
                    <td>操作</td>
                </tr>
                <tr th:each="userTaskInfo : ${userTaskList?.userTaskInfoList}">
                    <td><span th:text="${userTaskInfo.accountNmae}">测试</span></td>
                    <td><span th:text="${userTaskInfo.taskName}">测试</span></td>
                    <td><span th:text="${#dates.format(userTaskInfo.startTime, 'yyyy-MM-dd HH:mm')}">2022</span></td>
                    <td><span th:text="${userTaskInfo.status}">完成</span></td>
                    <td><span th:text="${userTaskInfo.nextAccountName}">无</span></td>
                    <td>
                        <button id="completTask" onclick="pass()">通过</button>
                        <button>打回</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>




    <script th:inline="javascript">
        /*<![CDATA[*/

        let date = {
            //流程部署id
            deploymentId:'',
            //流程实例id
            instanceId:'',
            //任务id
            taskId:'',
        }








        //部署流程
        $('#deployment').click(function () {
            $.post("/deployment", function (response) {
                alert('流程已部署成功')
                console.log(response);
                date.deploymentId = response.data;
            }, 'json');
        })

        //启动流程
        $("#startProcess").click(function () {
            $.ajax({
                type: "post",
                url: "/startProcess",
                dataType: "json",
                contentType: 'application/json', //请求数据类型
                data:JSON.stringify({
                    account: [[${session?.user.account}]]
                }),
                success:function (response) {
                    if(response.code == 200){
                        alert('成功')
                        console.log(response);
                        date.instanceId = response.data;
                    }else {
                        alert('失败')
                    }
                },

            })
        })

        /*]]>*/
    </script>

</body>
</html>